<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .left{
            width:300px;
            position: fixed;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #f3f3f3;
        }
        .right{
            left: 300px;
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: darkgray;
        }
        li{
            list-style-type:none;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="app"></div>
<script>
    let Home = {
        template:`
        <div>
            <h1>我的主页</h1>
        </div>
        `,
    }
    let setPage = {
        template:`
        <div>
            <h1>我的设置</h1>
        </div>
        `,
    }
    let lesson = {
        template:`
        <div>
            <h1>我的课程</h1>
        </div>
        `,
    }
    let App={
        template:`
        <div>
            <div class="left">
                <ul>
                    <li @click="changeNav('Home')">主页</li>    
                    <li @click="changeNav('setPage')">设置</li>    
                    <li @click="changeNav('lesson')">课程</li>    
                </ul>    
            </div>
            <div class="right">
            <component :is="active"></component>
        </div>
        </div>
    `,
    components:{Home,setPage,lesson},
    data(){
        return{
            active:'Home'
    }
    },
    methods:{
        changeNav(name){
            console.log('name',name);
            this.active = name
        }
    }
}
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>